<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="assets/css/main.css" rel="stylesheet">
<style type="text/css">
.content_sec {
	position: fixed;
	left: 240px;
	top: 0;
	right: 0px;
	height: 100%;
	background-color: white;
}
</style>
<script type="text/javascript" src="assets/js/jindo.desktop.all.js"></script>
<script type="text/javascript" src="assets/js/jindo_component.js"></script>
<script type="text/javascript" src="assets/js/jindo_mobile_component.js"></script>

<title>네이버 UX::반응형 웹</title>
</head>
<body>
	
	<header class="main_header">
		<a class="home_link" href=""> <img class="logo_img"
			alt="네이버 UX::반응형 웹" src="assets\img\logo.png">
		</a>
		<form class="search" action="http://search.naver.com/search.naver">
			<input class="search_text" type="text" name="query"
				placeholder="네이버 통합검색"> <input class="search_submit"
				type="submit" value="">
		</form>
		<ul class="content_navi">
			<li onclick="controller('home')">홈</li>
			<li onclick="controller('news')">뉴스</li>
			<li onclick="controller('dic')">사전</li>
			<li onclick="controller('me')">금융/생활</li>
			<li onclick="controller('beta')">유아교육</li>
		</ul>
	</header>
	<section class="main_container" id="mainContainer">
		<section class="tile-container">
			<ul class="tile-ct sample0">
				<li id="home_main">home</li>
			</ul>
			<ul class="tile-ct sample0">
				<li>news</li>
			</ul>
			<ul class="tile-ct sample0">
				<li>dic</li>
			</ul>
			<ul class="tile-ct sample0">
				<li>me</li>
			</ul>
			<ul class="tile-ct sample0">
				<li>beta</li>
			</ul>
		</section>
	</section>

	<section class="sub_container" id="subContainer">
		<section class="sub-container">
			<ul class="sub-ct">
				<li class="login">
					<div class="login_set">
						<input type="text" class="login_input" id="userid"> <input
							type="password" class="login_input" id="userpw">
						<button id="btnLogin">로그인</button>
						<button>회원가입</button>
					</div>
					<div class="login_set">
						<h5>test</h5>
						<button id="btnLogout">로그아웃</button>
					</div>
				</li>
			</ul>
			<ul class="sub-ct">
				<li>news</li>
			</ul>
			<ul class="sub-ct">
				<li>dic</li>
			</ul>
			<ul class="sub-ct">
				<li>me</li>
			</ul>
			<ul class="sub-ct ">
				<li>beta</li>
			</ul>
		</section>
	</section>

	<script type="text/javascript">
		jindo.$Element("home_main").attach("click", click);
		function click(ss) {
			openContent("http://map.naver.com/");
		}
		var oFlicking = new jindo.m.Flicking('mainContainer', {
			bHorizontal : true, //가로형 여부
			sClassPrefix : 'tile-', //Class의 prefix
			nDefaultIndex : 0, //로드시에 화면에 보이는 콘텐츠의 인덱스
			bAutoResize : true, //화면 사이즈 조정 여부 
			bUseCircular : false, //순환여부 
			sAnimation : "slide" //플리킹 애니메이션 타입  "slide", "cover" 사용가능
		}).attach({
			'afterFlicking' : function(sss) {
			}
		});

		var sFlicking = new jindo.m.Flicking('subContainer', {
			bHorizontal : true, //가로형 여부
			sClassPrefix : 'sub-', //Class의 prefix
			nDefaultIndex : 0, //로드시에 화면에 보이는 콘텐츠의 인덱스
			bAutoResize : true, //화면 사이즈 조정 여부 
			bUseCircular : false, //순환여부 
			sAnimation : "cover" //플리킹 애니메이션 타입  "slide", "cover" 사용가능
		}).attach({
			'afterFlicking' : function(sss) {
			}
		});

		function controller(cat) {
			if (cat == "home") {
				oFlicking.moveTo(0);
				sFlicking.moveTo(0);
			}
			if (cat == "news") {
				oFlicking.moveTo(1);
				sFlicking.moveTo(1);
			}
			if (cat == "dic") {
				oFlicking.moveTo(2);
				sFlicking.moveTo(2);
			}
			if (cat == "me") {
				oFlicking.moveTo(3);
				sFlicking.moveTo(3);
			}
			if (cat == "beta") {
				oFlicking.moveTo(4);
				sFlicking.moveTo(4);
			}
		}
	</script>
	<script type="text/javascript" src="assets/js/openContent.js"></script>
</body>
</html>